<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>报名</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" />
    <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
    <meta name="author" content="GetTemplates.co" />

    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />
    <meta name = "format-detection" content = "telephone=no">

    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">

    <link rel="stylesheet" href="${ctx}/assets/layouts/css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/icomoon.css">
    <!-- Themify Icons-->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/themify-icons.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/bootstrap.css">

    <!-- Magnific Popup -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/magnific-popup.css">
    <!-- Owl Carousel  -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/owl.carousel.min.css">
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/owl.theme.default.min.css">

    <!-- Theme style  -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/style.css">

    <!-- Modernizr JS -->
    <script src="${ctx}/assets/layouts/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
</head>
<style>
    .gtco-container {
        margin-top: -1em;
    }
</style>
<body>
<div id="page1">

    <!-- <div class="page-inner"> -->
    <nav class="gtco-nav" role="navigation">
        <div class="gtco-container">

            <div class="row">
                <div class="col-sm-4 col-xs-12">
                    <div id="gtco-logo"><label style="color: white;font-weight: 300">报名</label></div>
                </div>
            </div>
        </div>
    </nav>

    <header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-image: url(${ctx}/assets/layouts/images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
        <div class="overlay"></div>
        <div class="gtco-container">
            <div class="row">
                <div class="col-md-12 col-md-offset-0 text-left">
                    <div class="row row-mt-15em" style="margin-top: 3em;">
                        <div class="col-md-7 mt-text animate-box" style="margin-bottom: 1em;" data-animate-effect="fadeInUp">
                            <span class="intro-text-small">Start a wonderful <label style="color: #fbb448">journey</label></span>
                            <h1 class="cursive-font" style="font-size: 30px!important;">开启一段美妙的旅程</h1>
                        </div>
                        <div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
                            <div class="form-wrap">
                                <div class="tab">

                                    <div class="tab-content">
                                        <div class="tab-content-inner active" data-content="signup">
                                            <div id="error-message" style="color: red;margin-bottom: 10px;"></div>
                                            <h3 class="cursive-font">报名信息</h3>
                                            <form id="sign-form" action="#">
                                                <div class="row form-group">
                                                    <div class="col-md-12">
                                                        <input id="useId" type="hidden" value="${user.pkId}"/>
                                                        <input type="text" id="name" name="name" class="form-control" placeholder="姓名" value="${user.name}"
                                                               data-rule-required="true" data-msg-required="请输入姓名">
                                                    </div>
                                                </div>
                                                <div class="row form-group">
                                                    <div class="col-md-6" style="float: left;padding-left: 25%">
                                                        <input type="radio" name="gender" value="1" <c:if test="${user.gender == 1}">checked</c:if>><label>男</label>
                                                    </div>
                                                    <div class="col-md-6" style="float: left;padding-left: 25%">
                                                        <input type="radio" name="gender" value="0" <c:if test="${user.gender == 0}">checked</c:if>><label>女</label>
                                                    </div>
                                                </div>
                                                <div class="row form-group">
                                                    <div class="col-md-12">
                                                        <input type="text" id="phone" name="phone" class="form-control" placeholder="手机号" value="${user.phone}"
                                                               data-rule-required="true" data-msg-required="请输入手机号"
                                                               data-rule-number="true" data-msg-number="手机号格式不正确"
                                                               data-rule-minlength="11" data-msg-minlength="手机号格式不正确"
                                                               data-rule-maxlength="11" data-msg-maxlength="手机号格式不正确">
                                                    </div>
                                                </div>
                                                <div class="row form-group">
                                                    <div class="col-md-12">
                                                        <input type="text" id="card" name="card" class="form-control" placeholder="身份证号" value=""
                                                               data-rule-required="true" data-msg-required="请输入身份证号"
                                                               data-rule-isCard="true">
                                                    </div>
                                                </div>
                                                <div class="row form-group">
                                                    <div class="col-md-12">
                                                        <input type="text" id="address" name="address" class="form-control" placeholder="地址" value="">
                                                    </div>
                                                </div>

                                                <div class="row form-group">
                                                    <div class="col-md-12">
                                                        <a style="color: white!important;" href="javascript:;" id="submit_register" onclick="sign()" class="btn btn-primary btn-block">提交报名</a>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="gtco-section">
        <div class="gtco-container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2 class="cursive-font primary-color"
                        style="text-align:left;font-family: 'Lato', Arial, sans-serif;font-size: 1.2em;margin-bottom: 10px;">
                        活动说明</h2>
                    <p style="text-align: left;font-size: 0.9em;margin-bottom: -1em;">
                        &nbsp;&nbsp;活动主题：登山 野营<br>
                        &nbsp;&nbsp;活动日期：2017年10月1日 ~ 10月6日<br>
                        &nbsp;&nbsp;出发时间：2017年9月30日中午12点<br>
                        &nbsp;&nbsp;目的地：泰山<br>
                        &nbsp;&nbsp;行程：5小时<br>
                        &nbsp;&nbsp;费用：200元/人<br>
                        &nbsp;&nbsp;提醒：用户提交报名后，客服工作人员将通过电话，短信或其他通讯方式，与您取得联系，请您务必保持手机畅通。
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div id="gtco-features">
        <div class="gtco-container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2 class="cursive-font" style="text-align:left;color: white;font-family: 'Lato', Arial, sans-serif;font-size: 1.2em;margin-bottom: 10px;">报名名单</h2>
                    <table style="width:80%;margin-left: 10%">
                        <c:forEach items="${applicants}" var="applicant">
                            <tr style="color: white;width: 100%;">
                                <td>${applicant.name}</td>
                                <td style="text-align: right">${applicant.phone}</td>
                            </tr>
                        </c:forEach>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${ctx}/assets/layouts/js/jquery.min.js"></script>
<script src="${ctx}/assets/layouts/js/jquery.waypoints.min.js"></script>
<script src="${ctx}/assets/layouts/js/moment.min.js"></script>
<script src="${ctx}/assets/layouts/js/owl.carousel.min.js"></script>
<script src="${ctx}/assets/layouts/js/main.js"></script>
<script src="${ctx}/assets/pages/scripts/app.js"></script>
<script src="${ctx}/assets/global/plugins/jquery-validation/js/jquery.validate.js" type="text/javascript"></script>
<script src="${ctx}/assets/pages/scripts/md5.js"></script>
<script>
    $(function () {
        // 验证身份证号格式
        jQuery.validator.addMethod("isCard", function(value,element) {
            if(!/^\d{17}(\d|x)$/i.test(value));
            var card_format = /^\d{17}(\d|x)$/i;
            return this.optional(element) || card_format.test(value);

        }, "身份证号格式不正确");

        $("#sign-form").validate();
    })

    function sign() {

        var check = $("#sign-form").validate().form();
        if (!check) {
            return;
        }
        var data = {
            name: $("#name").val(),
            phone: $("#phone").val(),
            card: $("#card").val(),
            gender: $('input[name="gender"]:checked').val(),
            address: $("#address").val()
        }

        data.user = {
            pkId: $("#useId").val()
        }
        ajaxPostWithJson("${ctx}/app/sign_pay", data, function (signModel) {
            if (signModel.hasError) {
                $("#error-message").html("报名失败，请稍后重试");
            } else {
                // 建行支付
                toCCBPay(signModel.payModel);
//                window.location.href = getURL(signModel.payModel);
            }
        },function (msg) {
            $("#error-message").html("报名失败，请您稍后重试");
        });
    }

    function getURL(payModel) {
        var tmp ='MERCHANTID='+payModel.merchantid+'&POSID='+payModel.posid+'&BRANCHID='+payModel.branchid+'&ORDERID='+payModel.orderid+'&PAYMENT='+payModel.payment+'&CURCODE='+payModel.curcode+'&TXCODE='+payModel.txcode+'&REMARK1=&REMARK2=';
        var temp_New=tmp+'&TYPE='+payModel.type+'&PUB='+payModel.pub+'&GATEWAY='+payModel.gateway+'&CLIENTIP='+'&REGINFO='+'&PROINFO='+'&REFERER=';
        var temp_New1=tmp+'&TYPE='+payModel.type+'&GATEWAY='+payModel.gateway+'&CLIENTIP='+'&REGINFO='+'&PROINFO='+'&REFERER=';
        var strMD5 = hex_md5(temp_New);
//        var CCBUrl = payModel.ccburl + temp_New1 + '&MAC=' + strMD5;
        var CCBUrl = temp_New1 + '&MAC=' + strMD5;
        return CCBUrl;
    }

    function toCCBPay(payModel) {
        var u = navigator.userAgent.toLowerCase(), app = navigator.appVersion;
        var isAndroid = u.indexOf('android') > -1 || u.indexOf('linux') > -1; //android终端或者uc浏览器
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+mac os x/); //ios终端
        if (isiOS ==false){
            isiOS = u.indexOf('iphone')>-1; //ios终端
        }
        if (isiOS ==false){
            isiOS = u.indexOf('ipad')>-1; //ios终端
        }
        console.log("u:" + u);
        console.log("app:" + app);
        console.log("isAndroid:" + isAndroid);
        console.log("isiOS:" + isiOS);
//        $('#address').attr('value', "isAndroid:" + isAndroid +";isiOS:" + isiOS);
        var baseUrl = getURL(payModel);
        var url;
        if (isiOS){
            window.location ="mbspay://direct?" + baseUrl;
        } else{
            mbspay.directpay(baseUrl);
//            window.location.href = getURL(payModel);
        }

        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga')
    }
</script>
</body>
</html>

